<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="title">
                Nhóm người dùng
            </ui:define>

            <ui:define name="content">
                <h:form id="inputForm">
                    <p:panel>
                        <table border="0" cellspacing="5">
                            <tbody>
                                <tr>
                                    <td style="vertical-align: top">
                                        <h:panelGrid columns="2">
                                            Tên role  
                                            <p:inputText value="#{omapRoleBean.selected.roleName}"/>
                                            Mô tả <p:inputTextarea value="#{omapRoleBean.selected.description}"/>
                                        </h:panelGrid>
                                    </td>
                                    <td style="vertical-align: top">
                                        <h:panelGrid columns="2">
                                            Người dùng
                                            <p:selectManyMenu value="#{omapRoleBean.selected.omapUserList}">
                                                <f:selectItems value="#{omapUserBean.list}" var="item" 
                                                               itemLabel="#{item.username}" itemValue="#{item}"/>
                                            </p:selectManyMenu>
                                        </h:panelGrid>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <h:panelGrid columns="5">
                            <p:commandButton update="inputForm tableForm" value="Thêm mới" rendered="#{!omapRoleBean.edit}" action="#{omapRoleBean.create()}"/>
                            <p:commandButton update="inputForm tableForm" value="Cập nhật" rendered="#{omapRoleBean.edit}" action="#{omapRoleBean.edit()}"/>
                            <p:commandButton update="inputForm tableForm" value="Xóa" rendered="#{omapRoleBean.edit}" action="#{omapRoleBean.remove()}">
                                <f:param name="id" value="#{omapRoleBean.selected.roleId}"/>
                            </p:commandButton>
                            <p:commandButton ajax="false" value="Hủy bỏ" immediate="true" action="#{omapRoleBean.resetToCreateForm()}"/>
                        </h:panelGrid>
                    </p:panel>
                </h:form>

                <br/>

                <h:form id="tableForm">
                    <p:dataTable value="#{omapRoleBean.list}" var="item" paginator="#{omapRoleBean.list.size() >20}" rows="20" >
                        <p:column headerText="Tên nhóm" sortBy="#{item.roleName}">
                            #{item.roleName}
                        </p:column>
                        <p:column headerText="Người dùng" sortBy="#{item.userListString}">
                            #{item.userListString}
                        </p:column>
                        <p:column headerText="Mô tả" sortBy="#{item.description}">
                            #{item.description}
                        </p:column>
                        <p:column headerText="Xử lý">
                            <p:commandButton ajax="false" title="Chỉnh sửa" icon="ui-icon ui-icon-pencil" action="#{omapRoleBean.prepareEdit()}">
                                <f:param name="id" value="#{item.roleId}"/>
                            </p:commandButton>
                            <p:commandButton ajax="false" title="Xóa" icon="ui-icon ui-icon-close" action="#{omapRoleBean.remove()}">
                                <f:param name="id" value="#{item.roleId}"/>
                            </p:commandButton>

                        </p:column>
                    </p:dataTable>
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
